import React, { FC, ReactElement } from 'react'
import { ITodo } from '../typings';

interface IProps {
  todo: ITodo,
  toggleTodo: (id: number) => void,
  removeTodo: (id: number) => void,
}
const TdItem: FC<IProps> = ({ todo, toggleTodo, removeTodo }): ReactElement => {

  const { id, content, completed } = todo

  return(

    <div className="flex w-screen max-w-sm mx-auto space-x-3 border-b py-2 hover:bg-gray-100 cursor-pointer">
      <label className="flex-1 ">
        <input type="checkbox" checked={ completed } onChange={ () => toggleTodo(id) }/>
        <span className={ `${completed && 'line-through'} ml-2 w-32 inline-block text-2xl` }>{ content }</span>
      </label>

      <span className="flex-shrink-0 ">
        <button className="ml-3 py-2 px-4 bg-purple-600 text-white text-base font-semibold rounded-lg purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200" onClick={() => removeTodo(id)}>删除</button>
      </span>
    </div>
  )
}

export default TdItem;